<template>
  <div>
    <el-dialog
      :title="!isEdit ? '新增部门' : '编辑部门'"
      :visible="showDialog"
      :append-to-body="true"
      @close="close"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="部门名称" label-width="150px" prop="name">
          <el-input v-model="form.name" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门编码" label-width="150px" prop="code">
          <el-input v-model="form.code" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门负责人" label-width="150px" prop="managerId">
          <el-select v-model="form.managerId" placeholder="请选择负责人">
            <!-- 渲染负责人列表 -->
            <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" label-width="150px" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" placeholder="1-100个字符" />
          <el-form-item style="margin-top: 10px;">
            <el-button type="primary" @click="doClick">{{ !isEdit ? '新增' : '更新' }}</el-button>
            <el-button type="danger" @click="close">取消</el-button>
          </el-form-item>
        </el-form-item></el-form>
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es'
import { Head, addANewDepartment, departmentDetails, editorialDepartment } from '@/api/department'
export default {
  name: '',
  props: {
    showDialog: {
      type: Boolean,
      // default 是属性的默认值， 一般要加上，不加就有黄色的警告
      default: false
    },
    departmentList: {
      type: Array,
      // 复杂数据类型的默认值，怎么加？
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    // 这里在校验的时候，如果是编辑操作，那么departmentList数组里面，应该吧自己筛选掉，在剩余的元素里面去校验
    // 工作里面，对复杂数据类型的赋值，也不能直接使用等号。 因为等号赋值的是地址。 应该使用深拷贝
    const validatorName = (rule, value, callback) => {
      // some 检查一个数组里面是否有一个元素符合条件，如果有就是 true
      // every 检查一个数组里面所有元素都符合条件，如果是 true， 有一个不符合就是false
      let res = cloneDeep(this.departmentList)
      if (this.isEdit) {
        // 下面这个函数就是我们的筛选过滤掉 当前部门的函数
        res = res.filter(item => item.id !== this.currentId)
      }
      if (res.some(item => item.name === value)) {
        callback(new Error('部门名称重复'))
      } else {
        callback()
      }
    }
    const validatorCode = (rule, value, callback) => {
      let res = cloneDeep(this.departmentList)
      if (this.isEdit) {
        // 下面这个函数就是我们的筛选过滤掉 当前部门的函数
        res = res.filter(item => item.id !== this.currentId)
      }
      if (res.some(item => item.code === value)) {
        callback(new Error('ID重复'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: ''
      },
      managerList: [],
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '部门名称位数在2-10位', trigger: 'blur' },
          { 'validator': validatorName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '部门编码位数在2-10位', trigger: 'blur' },
          { 'validator': validatorCode, trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 100, message: '部门介绍位数在1-100位', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 编辑监听
    isEdit: function(newVal, oldVal) {
      console.log(newVal, oldVal)
      if (newVal) {
        this.departmentDetailsCompany()
      }
    }
  },
  created() {
    this.headSysuser()
  },
  methods: {
    async departmentDetailsCompany() {
      const res = await departmentDetails(this.currentId)
      this.form = res.data
    },
    close() {
      // 清除表单原始数据 + 清除表单校验
      this.$refs.ruleForm.resetFields()
      this.$emit('update:show-dialog', false)
      // 解决第二次不回显
      this.$emit('updata:is-edit', false)
      // form结构还原
      this.form = this.$options.data().form
    },
    async headSysuser() {
      const res = await Head()
      this.managerList = res.data
    },
    doClick() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 表单的基础校验 和 业务校验成功以后， 发起新增接口
          if (this.isEdit) {
            await editorialDepartment(this.form)
          } else {
            await addANewDepartment({ ...this.form, pid: this.currentId })
          }
          // 添加成功以后，做一些收尾的工作
          // 1. 关闭弹窗， 2.给个添加成功的友好提示 3.刷新父组件的数据
          this.close()
          this.$message({
            message: `${this.isEdit ? '编辑' : '添加'}部门成功`,
            type: 'success'
          })
          // 怎么在子组件调用父组件方法 -----  通知，通信
          // 子组件通知父组件 去做一些事情,更新页面
          this.$emit('add-success')
        }
      })
    }
  }
}
</script>

<style>

</style>
